import React, { Component } from 'react'
import {Button, Tag} from 'antd'
import { observer, inject } from 'mobx-react'
import styles from './EditorPreView.less'
import E from 'wangeditor'
import moment from 'moment'


class EditorPreView extends Component {

	color = [
		'#26b99a',
		'#5bc0de',
		'#f0ad4e',
		'#4b5f71',
		'#e68f8c'
	]

	componentDidMount() {	
 		this.editor = new E('#header', '#content')
		this.editor.create()
		this.editor.$textElem.attr('contenteditable', false)
  }

	render() {
		return (
			<div className={styles.editorPreView}>
				<div id="header" style={{display: 'none'}}></div>
				<h1 className={styles.postTitle}>{this.props.article.articleTitle}</h1>
				<p className={styles.postTime}>{this.props.article.articleCreateTime}</p>
				<div className={styles.postTag}>
					{
						this.props.article.articleCategory.map((item, index) => {
							return <Tag key={item} color={this.color[index]}>{item}</Tag>
						})
					}
				</div>
				{this.props.article.articleDesc && <p className={styles.postDesc}>{this.props.article.articleDesc}</p>}
				<div id="content" className="thirdStepView" style={{minHeight: 'calc(100vh - 435px)'}}>
					<div dangerouslySetInnerHTML={{__html: this.props.article.fuhtml}} />
				</div>
			</div>
		)
	}
}


export default EditorPreView